<template>
	<div class="list wrapper" ref="wrapper" >
		 <ul class="content"  >
			<div class="area">
				<div class="title border-topbottom">当前城市</div>
				<div class="button-list">
					<div class="button-wraper">
						<div class="button">{{currentCity}}</div>
					</div>
				</div>
			</div>
			<div class="area">
				<div class="title border-topbottom">热门城市</div>
				<div class="button-list" >
					<div class="button-wraper" v-for="(item,index) in hotCities" :key="index">
						<div class="button" @click="changeCurrentCity(item.name)">{{item.name}}</div>
					</div>
				</div>
			</div>
			<div class="area" v-for="(item,key,index) in cities" :key="index" :ref="key">
				<div class="title border-topbottom" >{{key}}</div>
				<div class="item-list">
					<div 
						class="item border-bottom"
						 v-for="item2 in item" 
						 :key="item2.id"  
						 @click="changeCurrentCity(item2.name)"
					>
						 {{item2.name}}
					</div>
				</div>
			</div>
		</ul>
	</div>
</template>

<script>
	import BScroll from '@better-scroll/core'
	import {mapGetters} from 'vuex'
	import {mapState} from 'vuex'
	export default{
		data(){
			return{
			}
		},
		mounted() {
			// console.log("渲染")
			//数据加载完成，可以进行初始化了
			this.$nextTick(() =>{
			 this.initNormal();
			})
		},
		updated() {
			// console.log("update")
			//数据加载完成，可以进行初始化了
			this.$nextTick(() =>{
			 this.initNormal();
			});
			//通过事件总线，另一个组件调用这个组件的方法，完成本组件数据的更新
			this.bus.$on('functionEmit',val=>{
				this.changeCurrentCity(val)
			})
		},
		computed:{
			...mapGetters(['cities','hotCities','moveNum']),
			...mapState(['currentCity'])
		},
		watch:{
			 '$store.state.Alpha': function () {
				   const val=this.$store.state.Alpha
				   const element=this.$refs[val][0]
				   this.$nextTick(()=>{
					   this.scroll.scrollToElement(element,1000)
				   })
				   // console.log(val)
				   // 这个方法中的element需要是个dom元素，所以这样处理
			   },
			   //监听滑动距离变动导致滑动的字母数字的变化的事件
			 '$store.state.moveNum':function(){
				 //取得vuex移动的字母个数0,1，2，3，4
				 const num=this.$store.state.moveNum
				 //取得所有的字母组成的数组：[A,B,C,……]
				 const arr=Object.keys(this.cities)
				 //获取对应的字母
				 const Alpha=arr[num]
				 //取得对应字母对应的元素节点
				 const element=this.$refs[Alpha][0]
				 //跳转到对应的节点
				 this.scroll.scrollToElement(element,1000)
			 }
		},
		methods:{
			//创建better的时机一定要在异步请求都完成以后,页面渲染完毕了
			//才进行对better-scroll的初始化.如果不这样做的话,
			//better-scroll无法正确取到content的高度.从而无法实现滚动.
			initNormal(){
			   if (!this.scroll) {
			       this.scroll = new BScroll(this.$refs.wrapper, {
			           click: true,
			           probeType: 3,
			       });
			       //console.log(this.scroll);
			   } else {
			       this.scroll.refresh();
			   };
			},
			//点击切换当前城市
			changeCurrentCity(val){
				this.$store.commit('changeCity',val)
				//并且回到顶部
				this.$nextTick(()=>{
					this.scroll.scrollTo(0, 0, 200)
				})
			}
		}
		
	}
</script>

<style lang="stylus" scoped>
	.border-topbottom
		&::before
			border-color #ccc
		&::after
			border-color #ccc	
	.border-bottom
		&::before
			border-color #ccc
		&::after
			border-color #ccc	
	.wrapper
		position absolute
		overflow hidden
		top 1.34rem
		right 0
		bottom 0
		left 0
		.title
			line-height .44rem
			font-size .26rem
			background #eee
			padding-left .2rem 
			color #666
		.button-list
			padding .1rem 0.6rem .1rem .1rem
			overflow hidden
			.button-wraper
				width 33.33%
				float left
				.button
					margin 0.1rem
					line-height 0.5rem
					font-size 0.3rem
					border 1px solid #ccc
					text-align center
					border-radius .06rem
		.item-list
			line-height .76rem
			.item
				padding-left .2rem
		
</style>
